<template>
  <div class="top-bar-container">
    <!-- 顶部导航栏 -->
    <el-header class="header-container">
      <!-- 左侧标题或 Logo -->
      <div class="top-title">
        <div class="logo-text" v-show="breadcrumbStore.breadcrumbList.length < 2">
          项目助手
        </div>
        <div class="breadcrumb-container">
          <!-- 面包屑展示 -->
          <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item
                v-for="item in breadcrumbStore.breadcrumbList"
            >
              <!-- 点击面包屑时调用 clickBreadcrumb -->
              <span @click="handleBreadcrumbClick(item.path)" class="breadcrumb-item">
                {{ item.name }}
              </span>
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>

      <!-- 顶部菜单示例 -->
      <div class="menu">
        <el-menu
            :ellipsis=false
            :default-active="activeMenu"
            mode="horizontal"
            @select="handleSelect"
            v-show="breadcrumbStore.breadcrumbList.length < 2"
        >
          <el-menu-item index="1" @click="toPath('home')">首页</el-menu-item>
          <el-menu-item index="2" @click="toPath('my-task')">我的任务</el-menu-item>
        </el-menu>
      </div>

      <!-- 右侧头像或用户信息 -->
      <div class="avatar">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link user-dropdown">
            <el-avatar :src="userStore.avatar"></el-avatar>
            <span class="username">{{ userStore.username }}</span>
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="settings" @click="clickSetting">
                <el-icon><setting /></el-icon>
                <span>设置</span>
              </el-dropdown-item>
              <el-dropdown-item command="logout" @click="clickLogout">
                <el-icon><switch-button /></el-icon>
                <span>退出登录</span>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </el-header>
    <!-- 面包屑区域 -->
  </div>
</template>

<script setup>
import {defineProps, computed, ref, watch} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {ElMessage} from "element-plus";
import {ArrowRight, Setting, SwitchButton, ArrowDown} from "@element-plus/icons-vue";
import {logout} from "../api/login/login.js"
import useUserStore from "../stores/useUserStore.js"
import { useBreadcrumbStore } from '@/stores/useBreadcrumbStore.js'


const clearBreadcrumbs = () => {
  breadcrumbStore.breadcrumbList = [{
    name: '首页',
    path: '/home?id=0',
    level: 1,
  }];
};

const breadcrumbStore = useBreadcrumbStore();
const userStore = useUserStore();
const router = useRouter()
const route = useRoute()

// 顶部菜单选中的索引
const activeMenu = ref('1')
// 仅接收标题参数，面包屑数据将从当前路由的 meta 中获取
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
})


// 监听路由变化，保持内部状态同步
watch(() => breadcrumbStore.breadcrumbs, (newValue) => {
})

// 顶部菜单点击事件
const handleSelect = (index) => {
}

const clickSetting = async () => {
  await router.push("/setting")
  // 添加或调整面包屑
  breadcrumbStore.adjustBreadcrumb({
    name: '设置',
    path: route.fullPath, // 获取完整路径（包含参数）
    level: 2
  });
}

const toPath = async (path) => {
  await router.push("/" + path)
  breadcrumbStore.adjustBreadcrumb({
    name: '我的任务',
    path: route.fullPath, // 获取完整路径（包含参数）
    level: 1
  });
}

// 点击面包屑项时调用
const handleBreadcrumbClick = async (value) => {
  await router.push(value)
  breadcrumbStore.adjustBreadcrumb({
    name: '项目详情',
    path: route.fullPath, // 获取完整路径（包含参数）
    level: 2
  });
}

const clickLogout = async () => {
  const res = await userStore.logOut();
  if (res.data.code === 200) {
    await router.replace("/login")
    ElMessage.success('退出登录成功')
    clearBreadcrumbs()
  }
}

</script>

<style scoped>
.top-bar-container {
  width: 100%;
  background-color: #fff;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  z-index: 999;
  overflow: auto;
}
:deep(.el-header){
  padding: 0 !important;
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.top-title {
  display: flex;
  align-items: center;
}

.logo-text {
  font-size: 24px;
  font-weight: bold;
  background: linear-gradient(135deg, #409EFF, #67C23A);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-right: 20px;
}

.breadcrumb-container {
  display: flex;
  align-items: center;
  margin-top: 3px;
  margin-left: 20px;
}

.breadcrumb-item {
  cursor: pointer;
  transition: all 0.3s;
}

.breadcrumb-item:hover {
  color: #409EFF;
}

.menu {
  flex: 1;
  display: flex;
  justify-content: center;
}

.avatar {
  display: flex;
  align-items: center;
}

.user-dropdown {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.username {
  margin: 0 8px;
  font-size: 14px;
  color: #606266;
}

:deep(.el-menu) {
  border-bottom: none;
}

:deep(.el-menu-item) {
  font-size: 16px;
  font-weight: 500;
  height: 60px;
  line-height: 60px;
}

:deep(.el-menu-item.is-active) {
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}

:deep(.el-menu-item:hover) {
  background-color: rgba(64, 158, 255, 0.1);
}

:deep(.el-breadcrumb) {
  font-size: 16px;
}

:deep(.el-dropdown-menu__item) {
  display: flex;
  align-items: center;
}

:deep(.el-dropdown-menu__item i) {
  margin-right: 8px;
}
</style>
